<template>
  <div class="surechange">
    <head_><h1>修改密码</h1></head_>

    <div class="inp">
      <label for="oldpw">旧密码</label>
      <input
        type="text"
        placeholder="请输入旧密码"
        id="oldpw"
        v-model="oldpw"
        @blur="checkpw"
      />
    </div>

    <div class="inp">
      <label for="newpwd">新密码</label>
      <input
        v-model="newpw"
        :type="flas ? tests : pass"
        placeholder="请输入新密码"
        id="newpwd"
      />
      <van-icon
        @click="eye_active"
        :class="flas ? 'eye_active' : ''"
        name="eye-o"
        size="0.36rem"
      />
    </div>

    <div class="inp">
      <label for="sure">确认</label>
      <input
        :type="flas2 ? tests : pass"
        v-model="surepw"
        placeholder="再次输入新密码"
        id="sure"
      />
      <van-icon
        @click="eye_active2"
        :class="flas2 ? 'eye_active' : ''"
        name="eye-o"
        size="0.36rem"
      />
    </div>

    <div class="submit">
      <button
        @click="submit"
        :disabled="submitdisplay"
        :class="[submitcolor == true ? 'submit_active' : '']"
      >
        确认修改
      </button>
    </div>
  </div>
</template>

<script>
  //导入请求
import{changePwd,backPwd,checkPwd} from "../../request/userinfo/userinfo"
import head_ from '../jingtai_/header'
export default {
  props: {},
  data() {
    return {
      oldpw: "",
      newpw: "",
      surepw: "",
      flas: false,
      pass: "password",
      tests: "text",
      flas2: false,
      submitdisplay: true,
      submitcolor: false,
      regpw: /^[\w]{6,16}$/,
      
    };
    
  },
  methods: {
    //校验密码
    checkpw(){
      checkPwd({oldpw: this.oldpw}).then((res) => {
        if (res.code == 2000){
          this.$toast.success(res.msg);
        }else {
          this.$toast.fail(res.msg);
          this.oldpw=''
        }
      });
    },
    eye_active() {
      this.flas = !this.flas;
    },
    eye_active2() {
      this.flas2 = !this.flas2;
    },
    submit() {
      if (this.regpw.test(this.newpw) == false) {
        this.$toast.fail("6~16位，包含大小写字母和数字的组合");
      } else if (this.newpw != this.surepw) {
        this.$toast.fail("两次密码输入不一致");
      } else {
        changePwd({ password: this.newpw }).then((res) => {
          if (res.code==2000){
            this.$toast.success(res.msg);
            window.localStorage.removeItem("token");
            this.$router.push("/login");
          }else {
            this.$toast.fail("修改失败");
          }
        });
        
      }
    },
  },
  updated() {
    if (this.oldpw != "" && this.newpw != "" && this.surepw != "") {
      this.submitdisplay = false;
      this.submitcolor = true;
    } else {
      this.submitcolor = false;
      this.submitdisplay = true;
    }
  },
  components: {head_},
};
</script>

<style scoped lang="less">
.surechange {
  padding: 0 0.24rem;
  .title {
    display: flex;
    align-items: center;
    height: 0.88rem;
    span {
      flex: 1;
      text-align: center;
      font-size: 0.34rem;
      font-weight: bolder;
    }
  }
  .inp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.29rem;
    position: relative;
    label {
      font-size: 0.26rem;
      font-weight: bolder;
    }
    input {
      width: 5.48rem;
      height: 0.66rem;
      font-size: 0.22rem;
      padding-left: 0.19rem;
      border: 2px solid #e4e4e4;
      border-radius: 0.04rem;
      &::placeholder {
        color: #999;
      }
    }
    .van-icon-eye-o {
      position: absolute;
      top: 0.2rem;
      right: 0.19rem;
    }
    .eye_active {
      color: #2094ff;
    }
  }

  .submit {
    margin-top: 2.27rem;
    text-align: center;
    button {
      width: 5rem;
      height: 1rem;
      color: #999;
      background: #f2f2f2;
      font-size: 0.34rem;
      text-align: center;
      line-height: 1rem;
      border: none;
      outline: none;
    }
    .submit_active {
      background: #43a5ff;
      color: #fff;
    }
  }
}
</style>
